<template>
  <div class="app-container" ref="wrapper">
    <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick">

      <el-tab-pane label="用户权限" name="userPermTab">
        <el-row :gutter="20">
          <!--部门数据-->
          <el-col :span="4" :xs="24">
            <div class="head-container">
              <el-input
                  v-model="treeDeptName"
                  placeholder="请输入部门名称"
                  clearable
                  prefix-icon="el-icon-search"
                  style="margin-bottom: 20px"
              />
            </div>
            <div class="head-container">
              <el-tree
                  :data="deptOptions"
                  :props="{ label: 'label', children: 'children' }"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  ref="deptTreeRef"
                  default-expand-all
                  @node-click="handleNodeClick"
              />
            </div>
          </el-col>

          <!--权限数据-->
          <el-col :span="14">
            <div >
              <el-form :model="queryParams" ref="queryRef" v-show="showSearch">
                <el-row :gutter="12">
                  <el-col :span="6">
                    <el-form-item label="用户编号" prop="userName">
                      <el-input
                          v-model="queryParams.userName"
                          placeholder="请输入用户编号"
                          clearable
                          :style="{width: '100%'}"
                          @keyup.enter="handleQuery"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="用户名称" prop="nickName">
                      <el-input
                          v-model="queryParams.nickName"
                          placeholder="请输入用户名称"
                          clearable
                          :style="{width: '100%'}"
                          @keyup.enter="handleQuery"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-button type="primary" icon="Search" style="margin: 3px 3px" v-hasPermi="['system:userperm:list']" @click="handleQuery">搜索</el-button>
                      <el-button icon="Refresh" style="margin: 3px 3px" v-hasPermi="['system:userperm:reset']" @click="resetQuery">重置</el-button>
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-form>

              <el-row>
                <el-button
                    type="success"
                    style="margin: 3px 3px"
                    v-if="useUserStore().userInfo.userId == 1"
                    icon="Edit"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['system:userperm:edit']"
                >修改
                </el-button>
                <el-button
                    type="danger"
                    style="margin: 3px 3px"
                    v-if="useUserStore().userInfo.userId == 1"
                    icon="Delete"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['system:userperm:remove']"
                >清空
                </el-button>

              </el-row>

              <el-row>
                <xTable ref="userPermTableRef" refId="userPermTableRef" multiple="false" :height="tableHeight"
                        v-loading="loading" :data="userPermList" @selection-change="handleSelectionChange">
                  <template #columList>
                    <el-table-column label="用户id" align="center" v-if="false" prop="userId"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="用户编号" align="center" prop="userName" :show-overflow-tooltip="true"/>
                    <el-table-column label="用户名称" align="center" prop="nickName" :show-overflow-tooltip="true"/>
                    <el-table-column label="账户" align="center" prop="accNames" v-if="accPermFlag" :show-overflow-tooltip="true"/>
                    <el-table-column label="组合" align="center" prop="groupNames" v-if="groupPermFlag" :show-overflow-tooltip="true"/>
                    <el-table-column label="定价环境"  v-if="cfgPermFlag" class-name="small-padding fixed-width" align="center" prop="cfgNames"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="利率曲线" v-if="ircPermFlag" class-name="small-padding fixed-width" align="center" prop="ircNames"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="红利曲线"  v-if="divPermFlag" class-name="small-padding fixed-width" align="center" prop="divNames"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="波动率曲面" v-if="vlsPermFlag" class-name="small-padding fixed-width" align="center" prop="vlsNames"
                                     :show-overflow-tooltip="true"/>
                  </template>
                </xTable>
              </el-row>
              <el-row style="margin:10px 0 20px 0 ">
                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                />
              </el-row>
            </div>
          </el-col>


          <el-col :span="6">
            <el-tabs type="card" v-model="childTab">
              <el-tab-pane label="账户权限" name="userPermAccTab" v-if="accPermFlag">
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        icon="Edit"
                        :disabled="userAccSingle||accFlag"
                        @click="handleUserAccUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="userAccDetailPermTableRef" :height="tableHeight" refId="userAccDetailPermTableRef" multiple="false"
                          v-loading="detailLoading" :data="userAccPermDetailList"
                          @selection-change="handleUserAccSelectionChange">
                    <template #columList>
                      <el-table-column label="用户Id" align="center" prop="userId" v-if="false"/>
                      <el-table-column label="用户昵称" align="center" prop="nickName" v-if="false"/>
                      <el-table-column label="账户名称" align="center" prop="accName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.accRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>

              <el-tab-pane label="组合权限" name="userPermGroupTab" v-if="groupPermFlag">
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        icon="Edit"
                        :disabled="userGroupSingle||groupFlag"
                        @click="handleUserGroupUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--组合权限明细-->
                <el-row>
                  <xTable ref="userGroupDetailPermTableRef" :height="tableHeight" refId="userGroupDetailPermTableRef" multiple="false"
                          v-loading="detailLoading" :data="userGroupPermDetailList"
                          @selection-change="handleUserGroupSelectionChange">
                    <template #columList>
                      <el-table-column label="用户Id" align="center" prop="userId" v-if="false"/>
                      <el-table-column label="用户昵称" align="center" prop="nickName" v-if="false"/>
                      <el-table-column label="组合名称" align="center" prop="groupName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.groupRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>

              <!-- 定价配置-->
              <el-tab-pane label="定价配置" name="userPermCfgTab" v-if="cfgPermFlag" >
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        icon="Edit"
                        :disabled="userCfgSingle||cfgFlag"
                        @click="handleUserCfgUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="userCfgDetailPermTableRef" refId="userCfgDetailPermTableRef" multiple="false"
                          v-loading="detailLoading" :data="userCfgPermDetailList" :height="tableHeight"
                          @selection-change="handleUserCfgSelectionChange">
                    <template #columList>
                      <el-table-column label="用户Id" align="center" prop="userId" v-if="false"/>
                      <el-table-column label="用户昵称" align="center" prop="nickName" v-if="false"/>
                      <el-table-column label="配置名称" align="center" prop="cfgName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.cfgRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>
              <!--利率明细-->
              <el-tab-pane label="利率曲线" name="deptPermIrcTab" v-if="ircPermFlag">
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        icon="Edit"
                        :disabled="userIrcSingle||ircFlag"
                        @click="handleUserIrcUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="userIrcDetailPermTableRef" refId="userIrcDetailPermTableRef" multiple="false"
                          v-loading="detailLoading" :data="userIrcPermDetailList" :height="tableHeight"
                         @selection-change="handleUserIrcSelectionChange" >
                    <template #columList>
                      <el-table-column label="利率曲线名称" align="center" prop="ircName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.ircRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>

              <!--红利明细-->
              <el-tab-pane label="红利曲线" name="deptPermDivTab" v-if="divPermFlag" >
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        icon="Edit"
                        :disabled="userDivSingle||divFlag"
                        @click="handleUserDivUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="userDivDetailPermTableRef" refId="userDivDetailPermTableRef" multiple="false"
                          v-loading="detailLoading" :data="userDivPermDetailList" :height="tableHeight"
                         @selection-change="handleUserDivSelectionChange" >
                    <template #columList>
                      <el-table-column label="红利曲线名称" align="center" prop="divName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.divRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>

              <!--波动率明细-->
              <el-tab-pane label="波动率曲面" name="deptPermVlsTab" v-if="vlsPermFlag">
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        icon="Edit"
                        :disabled="userVlsSingle||vlsFlag"
                        @click="handleUserVlsUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="userVlsDetailPermTableRef" refId="userVlsDetailPermTableRef" multiple="false"
                          v-loading="detailLoading" :data="userVlsPermDetailList" :height="tableHeight"
                         @selection-change="handleUserVlsSelectionChange" >
                    <template #columList>
                      <el-table-column label="波动率曲面名称" align="center" prop="vlsName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.vlsRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>


          <!-- 修改用户账户权限对话框 -->
          <el-dialog :close-on-click-modal="false" draggable="true" :title="userAccPermTitle" v-model="userAccPermOpen"
                     width="600px" append-to-body>
            <el-form ref="userPermRef" :model="userAccPermForm" :rules="userAccPermRules" label-width="120px">
              <el-form-item label="用户名称" prop="nickName">
                <el-input v-model="userAccPermForm.nickName" disabled/>
                <el-input v-model="userAccPermForm.userId" v-show="false" disabled/>
              </el-form-item>
              <el-form-item label="本方账户" prop="accId">
                <baseCombox url="/pricing/account/querySelfAccountCombox.action" clearable disabled
                            size="small" :style="{width: '100%'}"
                            valueField="accId" labelField="accName" placeholder="本方账户"
                            v-model="userAccPermForm.accId"></baseCombox>
              </el-form-item>
              <el-form-item prop="accRight" label="账户权限">
                <dictCombox size="small" v-model="userAccPermForm.accRight" filterKey="1,2" :clearable="false"
                            dictType="roleType"></dictCombox>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="submitUserAccForm">确 定</el-button>
                <el-button @click="cancelUserAcc">取 消</el-button>
              </div>
            </template>
          </el-dialog>


          <!-- 修改用户组合权限对话框 -->
          <el-dialog :close-on-click-modal="false" draggable="true" :title="userGroupPermTitle" v-model="userGroupPermOpen"
                     width="600px" append-to-body>
            <el-form ref="userPermRef" :model="userGroupPermForm" :rules="userGroupPermRules" label-width="120px">
              <el-form-item label="用户名称" prop="nickName">
                <el-input v-model="userGroupPermForm.nickName" disabled/>
                <el-input v-model="userGroupPermForm.userId" v-show="false" disabled/>
              </el-form-item>
              <el-form-item label="组合" prop="groupId">
                <baseCombox url="/pricing/group/queryVGroupCombox.action" clearable disabled
                            size="small" :style="{width: '100%'}"
                            valueField="dict_val" labelField="dict_disp" placeholder="组合"
                            v-model="userGroupPermForm.groupId"></baseCombox>
              </el-form-item>
              <el-form-item prop="groupRight" label="组合权限">
                <dictCombox size="small" v-model="userGroupPermForm.groupRight" filterKey="0,2" :clearable="false"
                            dictType="roleType"></dictCombox>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="submitUserGroupForm">确 定</el-button>
                <el-button @click="cancelUserGroup">取 消</el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 修改用户配置权限对话框 -->
          <el-dialog :close-on-click-modal="false" draggable="true" :title="userCfgPermTitle" v-model="userCfgPermOpen"
                     width="600px" append-to-body>
            <el-form ref="userPermRef" :model="userCfgPermForm" :rules="userCfgPermRules" label-width="120px">
              <el-form-item label="用户名称" prop="nickName">
                <el-input v-model="userCfgPermForm.nickName" disabled/>
                <el-input v-model="userCfgPermForm.userId" v-show="false" disabled/>
              </el-form-item>
              <el-form-item label="定价配置" prop="cfgId">
                <baseCombox url="/pricingConfig/queryPricCfgCombox.action" clearable disabled
                            size="small" :style="{width: '100%'}"
                            valueField="cfgId" labelField="cfgName" placeholder="定价配置"
                            v-model="userCfgPermForm.cfgId"></baseCombox>
              </el-form-item>
              <el-form-item prop="cfgRight" label="账户权限">
                <dictCombox size="small" v-model="userCfgPermForm.cfgRight" filterKey="1,2" :clearable="false"
                            dictType="roleType"></dictCombox>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="submitUserCfgForm">确 定</el-button>
                <el-button @click="cancelUserCfg">取 消</el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 修改用户利率权限对话框 -->
          <el-dialog :close-on-click-modal="false" draggable="true" :title="userIrcPermTitle" v-model="userIrcPermOpen"
                     width="600px" append-to-body>
            <el-form ref="userPermRef" :model="userIrcPermForm" :rules="userIrcPermRules" label-width="120px">
              <el-form-item label="用户名称" prop="nickName">
                <el-input v-model="userIrcPermForm.nickName" disabled/>
                <el-input v-model="userIrcPermForm.userId" v-show="false" disabled/>
              </el-form-item>
              <el-form-item label="利率曲线" prop="ircCode">
                <baseCombox url="irCurve/queryIrCurveList.action"
                  size="small" :style="{width: '100%'}"
                    clearable disabled
                    valueField="ircCode"
                    labelField="ircName"
                     placeholder="请选择利率曲线" v-model="userIrcPermForm.ircCode"></baseCombox>
              </el-form-item>
              <el-form-item prop="ircRight" label="账户权限">
                <dictCombox size="small" v-model="userIrcPermForm.ircRight" filterKey="1,2" :clearable="false"
                            dictType="roleType"></dictCombox>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="submitUserIrcForm">确 定</el-button>
                <el-button @click="cancelUserIrc">取 消</el-button>
              </div>
            </template>
          </el-dialog>

          <!-- 修改用户红利权限对话框 -->
          <el-dialog :close-on-click-modal="false" draggable="true" :title="userDivPermTitle" v-model="userDivPermOpen"
                     width="600px" append-to-body>
            <el-form ref="userPermRef" :model="userDivPermForm" :rules="userDivPermRules" label-width="120px">
              <el-form-item label="用户名称" prop="nickName">
                <el-input v-model="userDivPermForm.nickName" disabled/>
                <el-input v-model="userDivPermForm.userId" v-show="false" disabled/>
              </el-form-item>
              <el-form-item label="红利曲线" prop="divCode">
                <baseCombox url="/pricing/comboBox/queryDivyield.action"
                      clearable disabled
                      size="small" :style="{width: '100%'}"
                      valueField="code"
                      labelField="name"
                      @change="handleQuery"  placeholder="请选择红利曲线"   v-model="userDivPermForm.divCode" ></baseCombox>
              </el-form-item>
              <el-form-item prop="divRight" label="账户权限">
                <dictCombox size="small" v-model="userDivPermForm.divRight" filterKey="1,2" :clearable="false"
                            dictType="roleType"></dictCombox>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="submitUserDivForm">确 定</el-button>
                <el-button @click="cancelUserDiv">取 消</el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 修改用户波动率曲面权限对话框 -->
          <el-dialog :close-on-click-modal="false" draggable="true" :title="userVlsPermTitle" v-model="userVlsPermOpen"
                     width="600px" append-to-body>
            <el-form ref="userPermRef" :model="userVlsPermForm" :rules="userVlsPermRules" label-width="120px">
              <el-form-item label="用户名称" prop="nickName">
                <el-input v-model="userVlsPermForm.nickName" disabled/>
                <el-input v-model="userVlsPermForm.userId" v-show="false" disabled/>
              </el-form-item>
              <el-form-item label="波动率曲面" prop="vlsCode">
                <baseCombox url="/pricing/comboBox/queryVolsurface.action"
                        clearable disabled
                        size="small"
                        :style="{width: '100%'}"
                        valueField="code"
                        labelField="name"
                        @change="handleQuery"  placeholder="请选择波动率曲面" v-model="userVlsPermForm.vlsCode" ></baseCombox>
              </el-form-item>
              <el-form-item prop="vlsRight" label="账户权限">
                <dictCombox size="small" v-model="userVlsPermForm.vlsRight" filterKey="1,2" :clearable="false"
                            dictType="roleType"></dictCombox>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="submitUserVlsForm">确 定</el-button>
                <el-button @click="cancelUserVls">取 消</el-button>
              </div>
            </template>
          </el-dialog>

        </el-row>

        <!-- 修改用户权限对话框 -->
        <el-dialog :close-on-click-modal="false" draggable="true" :title="title" v-model="open" width="600px"
                   append-to-body>
          <el-form ref="userPermRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="form.userName" disabled/>
            </el-form-item>


            <el-form-item label="账户" v-if="accPermFlag">
              <el-col :span="4">
                <el-checkbox label="全选" true-label="1" false-label="0" v-model="form.accFlag" @change="accFlagChange">
                  &nbsp;全选
                </el-checkbox>
              </el-col>
              <el-col :span="20">
                <baseCombox url="/pricing/account/querySelfAccountCombox.action"
                            valueField="accId" labelField="accName"
                            :disabled="accDisabled"
                            multiple
                            placeholder=" " v-model="form.accIds">
                </baseCombox>
              </el-col>
            </el-form-item>


            <el-form-item label="组合" v-if="groupPermFlag" >
              <el-col :span="4">
                <el-checkbox label="全选" true-label="1" false-label="0" v-model="form.groupFlag"
                             @change="groupFlagChange">&nbsp;全选
                </el-checkbox>
              </el-col>
              <el-col :span="20">
                <baseCombox url="/pricing/group/getVGroupList.action"
                            valueField="groupId" labelField="groupName"
                            :disabled="groupDisabled"
                            multiple
                            placeholder=" " v-model="form.groupIds">
                </baseCombox>
              </el-col>
            </el-form-item>

            <el-form-item label="定价环境" v-if="cfgPermFlag">
              <el-col :span="4">
                <el-checkbox label="全选" true-label="1" false-label="0" v-model="form.cfgFlag" @change="cfgFlagChange">
                  &nbsp;全选
                </el-checkbox>
              </el-col>
              <el-col :span="20">
                <baseCombox url="/pricing/pricingConfigAuthor/queryPricingUserAuthorByPage.action?productType=OtcOption"
                            valueField="cfg_id" labelField="cfg_name"
                            :disabled="cfgDisabled"
                            multiple collapse-tags collapse-tags-tooltip
                            placeholder=" " v-model="form.cfgIds">
                </baseCombox>
              </el-col>
            </el-form-item>

            <el-form-item label="利率曲线" v-if="ircPermFlag" >
              <el-col :span="4">
                <el-checkbox label="全选" true-label="1" false-label="0" v-model="form.ircFlag" @change="ircFlagChange">
                  &nbsp;全选
                </el-checkbox>
              </el-col>
              <el-col :span="20">
                <baseCombox url="/irCurve/queryIrCurveList.action"
                            valueField="ircCode" labelField="ircName"
                            :disabled="ircDisabled"
                            multiple collapse-tags collapse-tags-tooltip
                            placeholder=" " v-model="form.ircCodes">
                </baseCombox>
              </el-col>
            </el-form-item>

            <el-form-item label="红利曲线" v-if="divPermFlag">
              <el-col :span="4">
                <el-checkbox label="全选" true-label="1" false-label="0" v-model="form.divFlag" @change="divFlagChange">
                  &nbsp;全选
                </el-checkbox>
              </el-col>
              <el-col :span="20">
                <baseCombox url="/pricing/comboBox/queryDivyield.action"
                            valueField="code" labelField="name"
                            :disabled="divDisabled"
                            multiple collapse-tags collapse-tags-tooltip
                            placeholder=" " v-model="form.divCodes">
                </baseCombox>
              </el-col>
            </el-form-item>

            <el-form-item label="波动率曲面" v-if="vlsPermFlag">
              <el-col :span="4">
                <el-checkbox label="全选" true-label="1" false-label="0" v-model="form.vlsFlag" @change="vlsFlagChange">
                  &nbsp;全选
                </el-checkbox>
              </el-col>
              <el-col :span="20">
                <baseCombox url="/pricing/comboBox/queryVolsurface.action"
                            valueField="code" labelField="name"
                            :disabled="vlsDisabled"
                            multiple
                            collapse-tags collapse-tags-tooltip
                            placeholder=" " v-model="form.vlsCodes">
                </baseCombox>
              </el-col>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane label="部门权限" name="deptPermTab">
        <el-row :gutter="20">
          <!--部门树数据-->
          <el-col :span="4" :xs="24">
            <div class="head-container">
              <el-input
                  v-model="deptTreeDeptName"
                  placeholder="请输入部门名称"
                  clearable
                  prefix-icon="el-icon-search"
                  style="margin-bottom: 20px"
              />
            </div>
            <div class="head-container">
              <el-tree
                  :data="deptTreeOptions"
                  :props="{ label: 'label', children: 'children' }"
                  :expand-on-click-node="false"
                  :filter-node-method="deptFilterNode"
                  ref="deptTreeDeptRef"
                  default-expand-all
                  @node-click="handleDeptNodeClick"
              />
            </div>
          </el-col>
          <!--部门权限数据-->

          <el-col :span="14">
            <el-form :model="deptQueryParams" ref="deptQueryRef"  v-show="deptShowSearch"
                     >
              <el-row :gutter="12">
              <el-col :span="6">
                <el-form-item label="部门编号" prop="deptCode">
                  <el-input
                      v-model="deptQueryParams.deptCode"
                      placeholder="请输入部门编号"
                      clearable
                      @keyup.enter="deptHandleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="部门名称" prop="deptName">
                  <el-input
                      v-model="deptQueryParams.deptName"
                      placeholder="请输入部门名称"
                      clearable
                      @keyup.enter="deptHandleQuery"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="Search" style="margin: 3px 3px" @click="deptHandleQuery" v-hasPermi="['system:deptperm:list']">搜索</el-button>
                  <el-button icon="Refresh" style="margin: 3px 3px" @click="deptResetQuery" v-hasPermi="['system:deptperm:reset']">重置</el-button>
                </el-form-item>
              </el-col>

              </el-row>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                    type="success"
                    v-if="false"
                    plain
                    icon="Edit"
                    :disabled="deptSingle"
                    @click="deptHandleUpdate"
                    v-hasPermi="['system:deptperm:edit']"
                >修改
                </el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    v-if="false"
                    icon="Delete"
                    :disabled="deptMultipe"
                    @click="deptHandleDelete"
                    v-hasPermi="['system:deptperm:remove']"
                >清空
                </el-button>
              </el-col>
            </el-row>

            <el-row>
              <xTable ref="deptPermTableRef" refId="deptPermTableRef" multiple="false" :height="tableHeight"
                      v-loading="loading" :data="deptPermList" @selection-change="deptHandleSelectionChange">

                <template #columList>
                  <el-table-column label="部门id" v-if="false" align="center" prop="deptId" :show-overflow-tooltip="true"/>
                  <el-table-column label="部门编号" align="center" prop="deptCode" :show-overflow-tooltip="true"/>
                  <el-table-column label="部门名称" align="center" prop="deptName" :show-overflow-tooltip="true"/>
                  <el-table-column label="账户" align="center" v-if="accPermFlag"  prop="accNames" :show-overflow-tooltip="true"/>
                  <el-table-column label="组合" align="center" v-if="groupPermFlag"  prop="groupNames" :show-overflow-tooltip="true"/>
                  <el-table-column label="定价环境" v-if="cfgPermFlag"  class-name="small-padding fixed-width" align="center" prop="cfgNames"
                                   :show-overflow-tooltip="true"/>
                  <el-table-column label="利率曲线" v-if="ircPermFlag"  class-name="small-padding fixed-width" align="center" prop="ircNames"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="红利曲线"  v-if="divPermFlag" class-name="small-padding fixed-width" align="center" prop="divNames"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="波动率曲面" v-if="vlsPermFlag"  class-name="small-padding fixed-width" align="center" prop="vlsNames"
                                     :show-overflow-tooltip="true"/>
                </template>
              </xTable>
            </el-row>
          <el-row style="margin:10px 0 20px 0 ">
              <pagination
                  style="margin:10px 0 10px 0"
                  v-show="deptTotal > 0"
                  :total="deptTotal"
                  v-model:page="deptQueryParams.pageNum"
                  v-model:limit="deptQueryParams.pageSize"
                  @pagination="deptGetList"
              />
            </el-row>

          </el-col>

          <el-col :span="6" :xs="24">
            <el-tabs type="card" v-model="deptChildTab">
              <el-tab-pane label="账户权限" name="deptPermAccTab" v-if="accPermFlag">
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        v-if="false"
                        icon="Edit"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>

                <!--权限明细-->
                <el-row>
                  <xTable ref="deptDetailPermTableRef" refId="deptDetailPermTableRef" multiple="false" :height="tableHeight"
                          v-loading="detailLoading2" :data="deptPermDetailList">
                    <template #columList>
                      <el-table-column label="账户名称" align="center" prop="accName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.accRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="组合权限" name="userPermGroupTab" v-if="groupPermFlag" >
                <!--组合权限明细-->
                <el-row>
                  <xTable ref="deptGroupDetailPermTableRef" :height="tableHeight" refId="deptGroupDetailPermTableRef" multiple="false"
                          v-loading="detailLoading2" :data="deptGroupPermDetailList" >
                    <template #columList>
                      <el-table-column label="组合名称" align="center" prop="groupName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.groupRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>
                  <!-- 定价配置-->
              <el-tab-pane label="定价配置" name="deptPermCfgTab" v-if="cfgPermFlag" >
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        plain
                        v-if="false"
                        icon="Edit"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="deptCfgDetailPermTableRef" refId="deptCfgDetailPermTableRef" multiple="false"
                          v-loading="detailLoading2" :data="deptCfgPermDetailList" :height="tableHeight"
                         >
                    <template #columList>
                      <el-table-column label="配置名称" align="center" prop="cfgName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.cfgRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>
              <!--利率明细-->
              <el-tab-pane label="利率曲线" name="deptPermIrcTab" v-if="ircPermFlag" >
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        v-if="false"
                        plain
                        icon="Edit"
                        :disabled="single"
                        @click="handleUpdate"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="deptIrcDetailPermTableRef" refId="deptIrcDetailPermTableRef" multiple="false"
                          v-loading="detailLoading2" :data="deptIrcPermDetailList" :height="tableHeight"
                         >
                    <template #columList>
                      <el-table-column label="利率曲线名称" align="center" prop="ircName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.ircRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>

              <!--红利明细-->
              <el-tab-pane label="红利曲线" name="deptPermDivTab"  v-if="divPermFlag">
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        v-if="false"
                        plain
                        icon="Edit"
                        :disabled="single"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="deptDivDetailPermTableRef" refId="deptDivDetailPermTableRef" multiple="false"
                          v-loading="detailLoading2" :data="deptDivPermDetailList" :height="tableHeight"
                         >
                    <template #columList>
                      <el-table-column label="红利曲线名称" align="center" prop="divName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.divRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>

              <!--波动率明细-->
              <el-tab-pane label="波动率曲面" name="deptPermVlsTab" v-if="vlsPermFlag" >
                <el-row>
                  <el-col :span="1.5">
                    <el-button
                        type="success"
                        v-if="false"
                        plain
                        icon="Edit"
                        :disabled="single"
                        v-hasPermi="['system:userperm:edit']"
                    >修改
                    </el-button>
                  </el-col>
                </el-row>
                <!--权限明细-->
                <el-row>
                  <xTable ref="deptVlsDetailPermTableRef" refId="deptVlsDetailPermTableRef" multiple="false"
                          v-loading="detailLoading2" :data="deptVlsPermDetailList" :height="tableHeight"
                         >
                    <template #columList>
                      <el-table-column label="波动率曲面名称" align="center" prop="vlsName" :show-overflow-tooltip="true"/>
                      <el-table-column label="权限" align="center" prop="rightFlag" :show-overflow-tooltip="true">
                        <template #default="scope">
                          <dict-tag :options="roleType" :value="scope.row.vlsRight"/>
                        </template>
                      </el-table-column>
                    </template>
                  </xTable>
                </el-row>
              </el-tab-pane>

            </el-tabs>
          </el-col>
        </el-row>


        <!-- 添加或修改部门权限对话框 -->
        <el-dialog :close-on-click-modal="false" draggable="true" :title="deptTitle" v-model="deptOpen" width="600px"
                   append-to-body>
          <el-form ref="deptPermRef" :model="deptForm" :rules="rules" label-width="80px">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="deptForm.deptName" disabled placeholder="请输入部门名称"/>
            </el-form-item>

            <el-form-item label="账户" v-if="accPermFlag">
              <baseCombox url="/pricing/account/querySelfAccountCombox.action"
                          ref="accCombox"
                          valueField="accId" labelField="accName"
                          multiple
                          placeholder="请选择" v-model="deptForm.accIds">
              </baseCombox>
            </el-form-item>

            <el-form-item label="组合" v-if="groupPermFlag">
              <baseCombox url="/pricing/group/getVGroupList.action"
                          valueField="groupId" labelField="groupName"
                          multiple
                          placeholder="请选择" v-model="deptForm.groupIds">
              </baseCombox>

            </el-form-item>

            <el-form-item label="定价环境" v-if="cfgPermFlag" >
              <baseCombox url="/pricing/pricingConfigAuthor/queryPricingUserAuthorByPage.action?productType=OtcOption"
                          valueField="cfg_id" labelField="cfg_name"
                          multiple
                          placeholder="请选择" v-model="deptForm.cfgIds">
              </baseCombox>
            </el-form-item>
            <el-form-item label="利率曲线" v-if="ircPermFlag" >
              <baseCombox url="/irCurve/queryIrCurveList.action"
                          valueField="ircCode" labelField="ircName"
                          multiple
                          placeholder=" " v-model="deptForm.ircCodes">
              </baseCombox>
            </el-form-item>

            <el-form-item label="红利曲线" v-if="divPermFlag">
              <baseCombox url="/pricing/comboBox/queryDivyield.action"
                          valueField="code" labelField="name"
                          multiple
                          placeholder=" " v-model="deptForm.divCodes">
              </baseCombox>
            </el-form-item>

            <el-form-item label="波动率曲面" v-if="vlsPermFlag">
              <baseCombox url="/pricing/comboBox/queryVolsurface.action"
                          valueField="code" labelField="name"
                          multiple
                          placeholder=" " v-model="deptForm.vlsCodes">
              </baseCombox>
            </el-form-item>

          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="deptSubmitForm">确 定</el-button>
              <el-button @click="deptCancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script setup name="Userperm">
import {
  listUserPerm,
  delUserPerm,
  getUserPerm,
  updateUserPerm,
  getUserPermDetail,
  userGroupDetailPerm,
  userIrcDetailPerm,
  updateUserAccPerm,
  userCfgDetailPerm,
  userDivDetailPerm,
  userVlsDetailPerm,
  updateUserCfgPerm,
  updateUserGroupPerm,
  updateUserVlsPerm,
  updateUserIrcPerm,
  updateUserDivPerm
} from '@/api/system/userperm'
import {listDeptPerm, delDeptPerm, getDeptPerm, updateDeptPerm, getDeptPermDetail,getDeptPermGroupDetail,getDeptPermCfgDetail, getDeptPermIrcDetail, getDeptPermDivDetail, getDeptPermVlsDetail} from '@/api/system/deptperm'
import {treeselect} from '@/api/system/dept'
import useUserStore from "../../../store/modules/user";
const tableHeight = ref(null)
const {proxy} = getCurrentInstance()
const {roleType} = proxy.useDict('roleType')
const activeName = ref('userPermTab')
const detailLoading = ref(false)
const detailLoading2 = ref(false)
const userPermList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const userNames = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref('')
const userAccPermDetailList = ref([])
const userGroupPermDetailList =ref([])
const userCfgPermDetailList = ref([])
const userIrcPermDetailList = ref([])
const userDivPermDetailList = ref([])
const userVlsPermDetailList = ref([])
const deptPermDetailList = ref([])
const deptGroupPermDetailList = ref([])
const deptCfgPermDetailList = ref([])
const deptIrcPermDetailList = ref([])
const deptDivPermDetailList = ref([])
const deptVlsPermDetailList = ref([])

const deptPermList = ref([])
const deptOpen = ref(false)
const deptLoading = ref(true)
const deptShowSearch = ref(true)
const deptIdarrs = ref([])
const deptNames = ref([])
const deptSingle = ref(true)
const deptMultipe = ref(true)
const deptTotal = ref(0)
const deptTitle = ref('')
const treeDeptName = ref('')
const deptOptions = ref(undefined)
const deptTreeDeptName = ref('')
const deptTreeOptions = ref(undefined)

//全部设置输入框无效标志
const accDisabled = ref(false)
const groupDisabled = ref(false)
const cfgDisabled = ref(false)
const ircDisabled = ref(false)
const divDisabled = ref(false)
const vlsDisabled = ref(false)
//修改标题
const userCfgPermTitle = ref('用户权限修改')
const userGroupPermTitle = ref('用户权限修改')
const userAccPermTitle = ref('用户权限修改')
const userIrcPermTitle = ref('用户权限修改')
const userDivPermTitle = ref('用户权限修改')
const userVlsPermTitle = ref('用户权限修改')
//修改按钮控制
const userAccSingle = ref(true)
const userGroupSingle = ref(true)
const userCfgSingle = ref(true)
const userIrcSingle = ref(true)
const userDivSingle = ref(true)
const userVlsSingle = ref(true)
//修改数据
const userCfgPermRow = ref([])
const userGroupPermRow =ref([])
const userAccPermRow = ref([])
const userIrcPermRow = ref([])
const userDivPermRow = ref([])
const userVlsPermRow = ref([])
//修改弹出标志
const userAccPermOpen = ref(false)
const userGroupPermOpen=ref(false)
const userIrcPermOpen = ref(false)
const userDivPermOpen = ref(false)
const userVlsPermOpen = ref(false)
const userCfgPermOpen = ref(false)

//在界面上控制是否展示
const accPermFlag=ref(false);
const groupPermFlag=ref(false);
const cfgPermFlag=ref(true);
const ircPermFlag=ref(false);
const divPermFlag=ref(false);
const vlsPermFlag=ref(false);
const childTab = ref('userPermCfgTab')
const deptChildTab = ref('deptPermCfgTab')

const data = reactive({
  form: {},
  userAccPermForm: {
    nickName: undefined,
    accId: undefined,
    accRight: undefined,
    userId: undefined
  },
  userGroupPermForm: {
    nickName: undefined,
    groupId: undefined,
    groupRight: undefined,
    userId: undefined
  },
  userCfgPermForm: {
    nickName: undefined,
    cfgId: undefined,
    cfgRight: undefined,
    userId: undefined
  },
  userIrcPermForm: {
    nickName: undefined,
    ircCode: undefined,
    IrcRight: undefined,
    userId: undefined
  },
  userDivPermForm: {
    nickName: undefined,
    divCode: undefined,
    divRight: undefined,
    userId: undefined
  },
  userVlsPermForm: {
    nickName: undefined,
    vlsCode: undefined,
    vlsRight: undefined,
    userId: undefined
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    nickName: undefined,
    deptId: undefined
  },
  rules: {
    userName: [{required: true, message: '用户编号不能为空', trigger: 'blur'}],
    deptName: [{required: true, message: '部门名称不能为空', trigger: 'blur'}]
  },
  userAccPermRules: {
    nickName: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
    accId: [{required: true, message: '账户名称不能为空', trigger: 'blur'}],
    accRight: [{required: true, message: '权限不能为空', trigger: 'blur'}],
  },
  userGroupPermRules: {
    nickName: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
    groupId: [{required: true, message: '组合名称不能为空', trigger: 'blur'}],
    groupRight: [{required: true, message: '权限不能为空', trigger: 'blur'}],
  },
  userCfgPermRules: {
    nickName: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
    cfgId: [{required: true, message: '配置名称不能为空', trigger: 'blur'}],
    cfgRight: [{required: true, message: '权限不能为空', trigger: 'blur'}],
  },
  userIrcPermRules: {
    nickName: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
    ircCode: [{required: true, message: '利率曲线不能为空', trigger: 'blur'}],
    ircRight: [{required: true, message: '权限不能为空', trigger: 'blur'}],
  },
  userDivPermRules: {
    nickName: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
    cfgId: [{required: true, message: '红利曲线不能为空', trigger: 'blur'}],
    cfgRight: [{required: true, message: '权限不能为空', trigger: 'blur'}],
  },
  userVlsPermRules: {
    nickName: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
    vlsCode: [{required: true, message: '波动率曲面不能为空', trigger: 'blur'}],
    vlsRight: [{required: true, message: '权限不能为空', trigger: 'blur'}],
  },
  deptQueryParams: {
    pageNum: 1,
    pageSize: 10,
    deptCode:undefined,
    deptId: undefined,
    deptName: undefined,
    cfgId: [],
    groupId: [],
    accId: [],
    deptIdt: undefined
  },
  deptForm: {
    deptId: [{required: true, message: '部门ID不能为空', trigger: 'blur'}]
  }
})



const {
  queryParams,
  form,
  rules,
  deptQueryParams,
  deptForm,
  userAccPermForm,
  userIrcPermForm,
  userDivPermForm,
  userVlsPermForm,
  userAccPermRules,
  userCfgPermForm,
  userCfgPermRules,
  userGroupPermForm,
  userGroupPermRules
} = toRefs(data)


/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}
/** 根据名称筛选部门树 */
watch(treeDeptName, val => {
  proxy.$refs['deptTreeRef'].filter(val)
})

/** 查询部门下拉树结构 */
function getTreeselect() {
  treeselect().then(response => {
    deptOptions.value = response.data
    handleNodeClick({id: useUserStore().userInfo.deptId})
  })
}


/** 通过条件过滤节点  */
const deptFilterNode = (value, data) => {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}
/** 根据名称筛选部门树 */
watch(deptTreeDeptName, val => {
  proxy.$refs['deptTreeDeptRef'].filter(val)
})

/** 查询部门下拉树结构 */
function getDeptTreeselect() {
  treeselect().then(response => {
    deptTreeOptions.value = response.data
    handleDeptNodeClick({id: useUserStore().userInfo.deptId})
  })
}


/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.deptId = data.id
  handleQuery()
}


/** 节点单击事件 */
function handleDeptNodeClick(data) {
  deptQueryParams.value.deptIdt = data.id
  deptHandleQuery()
}

/** 查询用户权限列表 */
function getList() {
  loading.value = true
  listUserPerm(queryParams.value).then(response => {
    userPermList.value = response.rows
    userPermList.value.forEach((item, index, arr) => {
      if (item.accFlag === '1') {
        item.accNames = '全部'
      }
      if (item.groupFlag === '1') {
        item.groupNames = '全部'
      }
      if (item.cfgFlag === '1') {
        item.cfgNames = '全部'
      }
      if (item.ircFlag === '1') {
        item.ircNames = '全部'
      }
      if (item.divFlag === '1') {
        item.divNames = '全部'
      }
      if (item.vlsFlag === '1') {
        item.vlsNames = '全部'
      }
    })
    total.value = response.total
    loading.value = false
  })
}

/** 取消按钮 */
function cancel() {
  open.value = false
  reset()
}

/**用户账户弹窗 */
function cancelUserAcc() {
  userAccPermOpen.value = false
}
/**组合权限弹窗 */
function cancelUserGroup() {
  userGroupPermOpen.value = false
}
/**用户账户弹窗提交*/
function submitUserAccForm() {
  updateUserAccPerm(userAccPermForm.value).then(response => {
    proxy.$modal.msgSuccess(response.msg)
    userAccPermOpen.value = false
    getUserPermDetail({'userId': userAccPermForm.value.userId}).then(response => {
      userAccPermDetailList.value = response.rows
      getList();
      detailLoading.value = false
    })
  })
}


/**用户账户弹窗 */
function cancelUserCfg() {
  userCfgPermOpen.value = false
}
function cancelUserIrc() {
  userIrcPermOpen.value = false
}
function cancelUserDiv() {
  userDivPermOpen.value = false
}
function cancelUserVls() {
  userVlsPermOpen.value = false
}
/**用户配置弹窗提交*/
function submitUserCfgForm() {
  updateUserCfgPerm(userCfgPermForm.value).then(response => {
    proxy.$modal.msgSuccess(response.msg)
    userCfgPermOpen.value = false
    userCfgDetailPerm({'userId': userCfgPermForm.value.userId}).then(response => {
      userCfgPermDetailList.value = response.rows
      getList();
      detailLoading.value = false
    })
  })
}


/**用户组合权限弹窗提交*/
function submitUserGroupForm() {
  updateUserGroupPerm(userGroupPermForm.value).then(response => {
    proxy.$modal.msgSuccess(response.msg)
    userGroupPermOpen.value = false
    userGroupDetailPerm({'userId': userGroupPermForm.value.userId}).then(response => {
      userGroupPermDetailList.value = response.rows
      getList();
      detailLoading.value = false
    })
  })
}
/**用户利率弹窗提交*/
function submitUserIrcForm() {
  updateUserIrcPerm(userIrcPermForm.value).then(response => {
    proxy.$modal.msgSuccess(response.msg)
    userIrcPermOpen.value = false
    userIrcDetailPerm({'userId': userIrcPermForm.value.userId}).then(response => {
      userIrcPermDetailList.value = response.rows
      getList();
      detailLoading.value = false
    })
  })
}


/**用户红利弹窗提交*/
function submitUserDivForm() {
  updateUserDivPerm(userDivPermForm.value).then(response => {
    proxy.$modal.msgSuccess(response.msg)
    userDivPermOpen.value = false
    userDivDetailPerm({'userId': userDivPermForm.value.userId}).then(response => {
      userDivPermDetailList.value = response.rows
      getList();
      detailLoading.value = false
    })
  })
}

/**用户波动率弹窗提交*/
function submitUserVlsForm() {
  updateUserVlsPerm(userVlsPermForm.value).then(response => {
    proxy.$modal.msgSuccess(response.msg)
    userVlsPermOpen.value = false
    userVlsDetailPerm({'userId': userVlsPermForm.value.userId}).then(response => {
      userVlsPermDetailList.value = response.rows
      getList();
      detailLoading.value = false
    })
  })
}


/** 表单重置 */
function reset() {
  form.value = {
    userName: undefined,
    cfgId: '',
    cfgFlag: undefined,
    groupId: '',
    groupFlag: undefined,
    accId: '',
    accFlag: undefined,
    ircCode: '',
    ircFlag: undefined,
    divCode: '',
    divFlag: undefined,
    vlsCode: '',
    vlsFlag: undefined,
    cfgIds: [],
    groupIds: [],
    accIds: [],
    ircCodes: [],
    divCodes: [],
    vlsCodes: []
  }
  proxy.resetForm('userPermRef')
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}
const accFlag=ref(false);
const groupFlag=ref(false);
const cfgFlag=ref(false);
const ircFlag=ref(false);
const divFlag=ref(false);
const vlsFlag=ref(false);

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  userNames.value = selection.map(item => item.nickName)
  ids.value = selection.map(item => item.userId)
  single.value = selection.length != 1
  multiple.value = !selection.length
  if (selection.length == 1) {
    detailLoading.value = true
    if(selection[0].accFlag=='1'){
      accFlag.value=true;
    }else{
      accFlag.value=false;
    }
    if(accPermFlag.value===true){
      getUserPermDetail({'userId': selection[0].userId,'accFlag':selection[0].accFlag}).then(response => {
        userAccPermDetailList.value = response.rows
        detailLoading.value = false
      })
    }
    if(selection[0].groupFlag=='1'){
      groupFlag.value=true;
    }else{
      groupFlag.value=false;
    }
    if(groupPermFlag.value===true) {
      userGroupDetailPerm({'userId': selection[0].userId, 'groupFlag': selection[0].groupFlag}).then(response => {
        userGroupPermDetailList.value = response.rows
        detailLoading.value = false
      })
    }
    if(selection[0].cfgFlag=='1'){
      cfgFlag.value=true;
    }else{
      cfgFlag.value=false;
    }
    if(cfgPermFlag.value===true) {
      userCfgDetailPerm({'userId': selection[0].userId, 'cfgFlag': selection[0].cfgFlag}).then(response => {
        userCfgPermDetailList.value = response.rows
        detailLoading.value = false
      })
    }
    if(selection[0].ircFlag=='1'){
      ircFlag.value=true;
    }else{
      ircFlag.value=false;
    }
    if(ircPermFlag.value===true) {
      userIrcDetailPerm({'userId': selection[0].userId, 'ircFlag': selection[0].ircFlag}).then(response => {
        userIrcPermDetailList.value = response.rows
        detailLoading.value = false
      })
    }
    if(selection[0].divFlag=='1'){
      divFlag.value=true;
    }else{
      divFlag.value=false;
    }
    if(divPermFlag.value===true) {
      userDivDetailPerm({'userId': selection[0].userId, 'divFlag': selection[0].divFlag}).then(response => {
        userDivPermDetailList.value = response.rows
        detailLoading.value = false
      })
    }
    if(selection[0].vlsFlag=='1'){
      vlsFlag.value=true;
    }else{
      vlsFlag.value=false;
    }
    if(vlsPermFlag.value===true) {
      userVlsDetailPerm({'userId': selection[0].userId, 'vlsFlag': selection[0].vlsFlag}).then(response => {
        userVlsPermDetailList.value = response.rows
        detailLoading.value = false
      })
    }
  }else{

  }

}

/** 账户全选框改变触发 */
function accFlagChange(value) {
  if (value === '1') {
    //选中
    form.value.accIds = []
    accDisabled.value = true
  } else {
    //不选中
    accDisabled.value = false
  }

}


/** 组合全选框改变触发 */
function groupFlagChange(value) {
  if (value === '1') {
    //选中
    form.value.groupIds = []
    groupDisabled.value = true
  } else {
    //不选中
    groupDisabled.value = false
  }
}

/** 定价全选框改变触发 */
function cfgFlagChange(value) {
  if (value === '1') {
    //选中
    form.value.cfgIds = []
    cfgDisabled.value = true
  } else {
    //不选中
    cfgDisabled.value = false
  }
}

/** 利率全选框改变触发 */
function ircFlagChange(value) {
  if (value === '1') {
    //选中
    form.value.ircCodes = []
    ircDisabled.value = true

  } else {
    //不选中
    ircDisabled.value = false
  }
}

/** 红利全选框改变触发 */
function divFlagChange(value) {
  if (value === '1') {
    //选中
    form.value.divCodes = []
    divDisabled.value = true
  } else {
    //不选中
    divDisabled.value = false
  }
}

/** 波动率全选框改变触发 */
function vlsFlagChange(value) {
  if (value === '1') {
    //选中
    form.value.vlsCodes = []
    vlsDisabled.value = true
  } else {
    //不选中
    vlsDisabled.value = false
  }
}

/** 修改按钮操作 */
function handleUpdate() {
  reset()
  const userId = ids.value
  getUserPerm(userId).then(response => {
    form.value = response.data
    if (response.data.accId != null && response.data.accId != '') {
      form.value.accIds = response.data.accId.split(',')
    }
    if (response.data.groupId != null && response.data.groupId != '') {
      form.value.groupIds = response.data.groupId.split(',')
    }
    if (response.data.cfgId != null && response.data.cfgId != '') {
      form.value.cfgIds = response.data.cfgId.split(',')
    }
    if (response.data.ircCode != null && response.data.ircCode != '') {
      form.value.ircCodes = response.data.ircCode.split(',')
    }
    if (response.data.divCode != null && response.data.divCode != '') {
      form.value.divCodes = response.data.divCode.split(',')
    }
    if (response.data.vlsCode != null && response.data.vlsCode != '') {
      form.value.vlsCodes = response.data.vlsCode.split(',')
    }
    if (form.value.accFlag === '0') {
      accDisabled.value = false
    } else {
      accDisabled.value = true
      form.value.accIds = ''
    }
    if (form.value.groupFlag === '0') {
      groupDisabled.value = false
    } else {
      groupDisabled.value = true
      form.value.groupIds = ''
    }
    if (form.value.cfgFlag === '0') {
      cfgDisabled.value = false
    } else {
      cfgDisabled.value = true
      form.value.cfgIds = ''
    }
    if (form.value.ircFlag === '0') {
      ircDisabled.value = false
    } else {
      ircDisabled.value = true
      form.value.ircCodes = ''
    }
    if (form.value.divFlag === '0') {
      divDisabled.value = false
    } else {
      divDisabled.value = true
      form.value.divCodes = ''
    }
    if (form.value.vlsFlag === '0') {
      vlsDisabled.value = false
    } else {
      vlsDisabled.value = true
      form.value.vlsCodes = ''
    }

    open.value = true
    title.value = '修改用户权限'
  })
}

function handleUserAccUpdate() {
  userAccPermOpen.value = true
  userAccPermForm.value.nickName = userAccPermRow.value[0].nickName
  userAccPermForm.value.userId = userAccPermRow.value[0].userId
  userAccPermForm.value.accId = userAccPermRow.value[0].accId
  userAccPermForm.value.accName = userAccPermRow.value[0].accName
  userAccPermForm.value.accRight = userAccPermRow.value[0].accRight
}
function handleUserGroupUpdate(){
  userGroupPermOpen.value = true
  userGroupPermForm.value.nickName = userGroupPermRow.value[0].nickName
  userGroupPermForm.value.userId = userGroupPermRow.value[0].userId
  userGroupPermForm.value.groupId = userGroupPermRow.value[0].groupId
  userGroupPermForm.value.accName = userGroupPermRow.value[0].accName
  userGroupPermForm.value.groupRight = userGroupPermRow.value[0].groupRight
}

function handleUserCfgUpdate() {
  userCfgPermOpen.value = true
  userCfgPermForm.value.nickName = userCfgPermRow.value[0].nickName
  userCfgPermForm.value.userId = userCfgPermRow.value[0].userId
  userCfgPermForm.value.cfgId = userCfgPermRow.value[0].cfgId
  userCfgPermForm.value.accName = userCfgPermRow.value[0].cfgName
  userCfgPermForm.value.cfgRight = userCfgPermRow.value[0].cfgRight
}

function handleUserIrcUpdate() {
  userIrcPermOpen.value = true
  userIrcPermForm.value.nickName = userIrcPermRow.value[0].nickName
  userIrcPermForm.value.userId = userIrcPermRow.value[0].userId
  userIrcPermForm.value.ircCode = userIrcPermRow.value[0].ircCode
  userIrcPermForm.value.ircName = userIrcPermRow.value[0].ircName
  userIrcPermForm.value.ircRight = userIrcPermRow.value[0].ircRight
}

function handleUserDivUpdate() {
  userDivPermOpen.value = true
  userDivPermForm.value.nickName = userDivPermRow.value[0].nickName
  userDivPermForm.value.userId = userDivPermRow.value[0].userId
  userDivPermForm.value.divCode = userDivPermRow.value[0].divCode
  userDivPermForm.value.divName = userDivPermRow.value[0].divName
  userDivPermForm.value.divRight = userDivPermRow.value[0].divRight
}

function handleUserVlsUpdate() {
  userVlsPermOpen.value = true
  userVlsPermForm.value.nickName = userVlsPermRow.value[0].nickName
  userVlsPermForm.value.userId = userVlsPermRow.value[0].userId
  userVlsPermForm.value.vlsCode = userVlsPermRow.value[0].vlsCode
  userVlsPermForm.value.vlsName = userVlsPermRow.value[0].vlsName
  userVlsPermForm.value.vlsRight = userVlsPermRow.value[0].vlsRight
}


/** 提交按钮 */
function submitForm() {
  proxy.$refs['userPermRef'].validate(valid => {
    if (valid) {
      //将accIds,groupIds,cfgIds变成字符串
      if (form.value.accIds != null && form.value.accIds.length > 0) {
        form.value.accId = form.value.accIds.join(',')
      } else {
        form.value.accId = ''
      }
      if (form.value.groupIds != null && form.value.groupIds.length > 0) {
        form.value.groupId = form.value.groupIds.join(',')
      } else {
        form.value.groupId = ''
      }
      if (form.value.cfgIds != null && form.value.cfgIds.length > 0) {
        form.value.cfgId = form.value.cfgIds.join(',')
      } else {
        form.value.cfgId = ''
      }
      if (form.value.ircCodes != null && form.value.ircCodes.length > 0) {
        form.value.ircCode = form.value.ircCodes.join(',')
      } else {
        form.value.ircCode = ''
      }
      if (form.value.divCodes != null && form.value.divCodes.length > 0) {
        form.value.divCode = form.value.divCodes.join(',')
      } else {
        form.value.divCode = ''
      }
      if (form.value.vlsCodes != null && form.value.vlsCodes.length > 0) {
        form.value.vlsCode = form.value.vlsCodes.join(',')
      } else {
        form.value.vlsCode = ''
      }
      if (form.value.userId != undefined) {
        updateUserPerm(form.value).then(response => {
          proxy.$modal.msgSuccess('修改成功')
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete() {
  const userIds = ids.value
  proxy.$modal.confirm('是否确认清空用户名称为"' + userNames.value + '"的权限？').then(function () {
    return delUserPerm(userIds)
  }).then(() => {
    getList()
    detailLoading.value = true
    getUserPermDetail({'userId': userIds[0]}).then(response => {
      userAccPermDetailList.value = response.rows
      detailLoading.value = false
    })
    userCfgDetailPerm({'userId': userIds[0]}).then(response => {
      userCfgPermDetailList.value = response.rows
      detailLoading.value = false
    })
    proxy.$modal.msgSuccess('清空成功')
  }).catch(() => {
  })
}


/** 查询用户权限列表 */
function deptGetList() {
  deptLoading.value = true
  listDeptPerm(deptQueryParams.value).then(response => {
    deptPermList.value = response.rows
    deptTotal.value = response.total
    deptLoading.value = false
  })
}

/** 取消按钮 */
function deptCancel() {
  deptOpen.value = false
  deptReset()
}

/** 表单重置 */
function deptReset() {
  deptForm.value = {
    deptId: undefined,
    cfgId: '',
    groupId: '',
    accId: '',
    cfgIds: [],
    groupIds: [],
    accIds: [],
    ircCodes: [],
    divCodes: [],
    vlsCodes: []
  }
  proxy.resetForm('deptPermRef')
}

/** 搜索按钮操作 */
function deptHandleQuery() {
  deptQueryParams.value.pageNum = 1
  deptGetList()
}

/** 重置按钮操作 */
function deptResetQuery() {
  proxy.resetForm('deptQueryRef')
  deptHandleQuery()
}

/** 多选框选中数据 */
function deptHandleSelectionChange(selection) {
  deptNames.value = selection.map(item => item.deptName)
  deptIdarrs.value = selection.map(item => item.deptId)
  deptSingle.value = selection.length != 1
  deptMultipe.value = !selection.length
  if (selection.length == 1) {
    detailLoading2.value = true
    if(accPermFlag.value===true) {
      getDeptPermDetail({'deptId': selection[0].deptId}).then(response => {
        deptPermDetailList.value = response.rows
        detailLoading2.value = false
      })
    }
    if(groupPermFlag.value===true) {
      getDeptPermGroupDetail({'deptId': selection[0].deptId}).then(response => {
        deptGroupPermDetailList.value = response.rows
        detailLoading2.value = false
      })
    }
    if(cfgPermFlag.value===true) {
      getDeptPermCfgDetail({'deptId': selection[0].deptId}).then(response => {
        deptCfgPermDetailList.value = response.rows
        detailLoading2.value = false
      })
    }
    if(ircPermFlag.value===true) {
      getDeptPermIrcDetail({'deptId': selection[0].deptId}).then(response => {
        deptIrcPermDetailList.value = response.rows
        detailLoading2.value = false
      })
    }
    if(divPermFlag.value===true) {
      getDeptPermDivDetail({'deptId': selection[0].deptId}).then(response => {
        deptDivPermDetailList.value = response.rows
        detailLoading2.value = false
      })
    }
    if(vlsPermFlag.value===true) {
      getDeptPermVlsDetail({'deptId': selection[0].deptId}).then(response => {
        deptVlsPermDetailList.value = response.rows
        detailLoading2.value = false
      })
    }
  }
}


function handleUserAccSelectionChange(selection) {
  userAccPermRow.value = selection
  userAccSingle.value = selection.length != 1
}
function handleUserGroupSelectionChange(selection){
  userGroupPermRow.value = selection
  userGroupSingle.value = selection.length != 1
}
function handleUserCfgSelectionChange(selection) {
  userCfgPermRow.value = selection
  userCfgSingle.value = selection.length != 1
}

function handleUserIrcSelectionChange(selection) {
  userIrcPermRow.value = selection
  userIrcSingle.value = selection.length != 1
}
function handleUserDivSelectionChange(selection) {
  userDivPermRow.value = selection
  userDivSingle.value = selection.length != 1
}
function handleUserVlsSelectionChange(selection) {
  userVlsPermRow.value = selection
  userVlsSingle.value = selection.length != 1
}

/** 修改按钮操作 */
function deptHandleUpdate() {
  deptReset()
  const deptId = deptIdarrs.value
  getDeptPerm(deptId).then(response => {
    deptForm.value = response.data
    if (response.data.accId != null && response.data.accId != '') {
      deptForm.value.accIds = response.data.accId.split(',')
    }
    if (response.data.groupId != null && response.data.groupId != '') {
      deptForm.value.groupIds = response.data.groupId.split(',')
    }
    if (response.data.cfgId != null && response.data.cfgId != '') {
      deptForm.value.cfgIds = response.data.cfgId.split(',')
    }
    deptOpen.value = true
    deptTitle.value = '修改部门权限'
  })
}

/** 提交按钮 */
function deptSubmitForm() {
  proxy.$refs['deptPermRef'].validate(valid => {
    if (valid) {
      //将accIds,groupIds,cfgIds变成字符串
      if (deptForm.value.accIds != null && deptForm.value.accIds.length > 0) {
        deptForm.value.accId = deptForm.value.accIds.join(',')
      } else {
        deptForm.value.accId = ''
      }
      if (deptForm.value.groupIds != null && deptForm.value.groupIds.length > 0) {
        deptForm.value.groupId = deptForm.value.groupIds.join(',')
      } else {
        deptForm.value.groupId = ''
      }
      if (deptForm.value.cfgIds != null && deptForm.value.cfgIds.length > 0) {
        deptForm.value.cfgId = deptForm.value.cfgIds.join(',')
      } else {
        deptForm.value.cfgId = ''
      }

      if (deptForm.value.deptId != undefined && deptForm.value.deptId != null) {
        updateDeptPerm(deptForm.value).then(response => {
          proxy.$modal.msgSuccess('修改成功')
          deptOpen.value = false
          deptGetList()
        })
      }
    }
  })
}

/** 清空按钮操作 */
function deptHandleDelete() {
  const deptIds = deptIdarrs.value
  proxy.$modal.confirm('是否确认清空部门名称为"' + deptNames.value + '"的权限？').then(function () {
    return delDeptPerm(deptIds)
  }).then(() => {
    deptGetList()
    proxy.$modal.msgSuccess('清空成功')
  }).catch(() => {
  })
}

// getList();
getTreeselect()
getDeptTreeselect()
// deptGetList();
onMounted(()=>{

  tableHeight.value = proxy.$refs.wrapper.offsetParent.clientHeight * 0.73-150
  window.onresize = () => {
    return (() => {
      tableHeight.value = proxy.$refs.wrapper.offsetParent.clientHeight * 0.73-150
    })();
  }
})
</script>


<style lang="scss" scoped>

.el-table{
  overflow: hidden !important;
}


</style>
